import React, { Component, Fragment } from 'react';
import { Card, Table, Tag, Space, Modal, Button, message } from 'antd';
import Iaxios from './../../axios';
import './../../mocker/index.js';
import Utils from './../../utils/utils';

import './table.less';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: text => <span>{text}</span>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
	{
	  title: '性别',
	  dataIndex: 'sex',
	  key: 'sex',
		render: ress=>{
			return ress === 1 ? "男": "女"
		}
	},
	{
	  title: '状态',
	  dataIndex: 'sta',
	  key: 'sta',
		render: res=>{
			let config ={
				"1": "状态1",
				"2": "状态2",
				"3": "状态3",
				"4": "状态4",
				"5": "状态5"
			}
			return config[res];
		}
	},
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    render: tags => (
      <>
        {tags.map(tag => {
          let color = tag.length > 5 ? 'geekblue' : 'green';
          if (tag === 'loser') {
            color = 'volcano';
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </>
    ),
  },
  {
    title: 'Action',
    key: 'action',
    render: (text, record) => (
      <Space size="middle">
        <span>Invite {record.name}</span>
        <span>Delete</span>
      </Space>
    ),
  },
];

class BasicTable extends Component {
	state = {
		dataSource: [],
		data: [],
		selectedRowKeys1: [2],
		selectedRowKeys: [],
		selectedRows: []
	}
	params = {
		page: 1
	}
	componentDidMount(){
		this.request()
	}
	request = ()=>{
		let _this = this;
		Iaxios.ajax({
			url: "/test2",
			method: 'post',
			params:  {
				page: this.params.page//这里page不需要渲染dom所以不需要放在state里面
			}
		}).then((res)=>{
			console.log(res);
			if(res.code === 0){
				this.setState({
					data: res.result.list,
					selectedRowKeys: [],//后边执行删除等操作后清空
					selectedRows: null,
					pagination: Utils.pagination(res, (current)=>{
						console.log('222'+current);
						_this.params.page = current;
						this.request();
					})
				})
			}else{
				console.log('-------查查什么错-------');
			}
		})
	}
	onSelectChange = (selectedRowKeys, selectedRows) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
		console.log(selectedRows);
       this.setState({ selectedRowKeys1: selectedRowKeys });
  };
  deleteItem = ()=>{
  	let rows = this.state.selectedRows;
  	let ids = [];
  	rows.map(item=>{
  		ids.push(item.key)
  		return ids
  	})
  	Modal.confirm({
  		title: '删除提示',
  		content: `您将要删除${ids.join(",")}`,
  		onOk:()=>{
  			message.success("删除成功");
  			this.request();//删除完重新请求数据，符合开发思路
  		}
  	})
  }
	render(){
		const { selectedRowKeys1, selectedRowKeys } = this.state;
		const rowSelection = {
			type: 'radio',
			onChange: this.onSelectChange,
			selectedRowKeys:selectedRowKeys1
		}
		const rowCheckSelection = {
			type: 'checkbox',
			selectedRowKeys,
			onChange: (selectedRowKeys, selectedRows) => {
				let ages = [];
				selectedRows.map((item)=>{
					ages.push(item.age)
					return ages
				})
		    console.log(selectedRowKeys);
				console.log(selectedRows);
				console.log(ages)
		     this.setState({ selectedRowKeys, selectedRows });
		  }
		}
		return (
			<Fragment>
				<Card title="分页表格" className="card-wrap">
					<Table 
						columns={columns} 
						dataSource={this.state.data}
						pagination={this.state.pagination}
					/>
				</Card>
				<Card title="动态表格" className="card-wrap">
					<Table columns={columns} dataSource={this.state.data} bordered pagination={false} />
				</Card>
				<Card title="Mock-单选表格" className="card-wrap">
					<Table 
						columns={columns} 
						dataSource={this.state.data} 
						rowSelection={rowSelection}
						onRow={record => {
							return {
								onClick: event => { this.setState({selectedRowKeys: [record.key]})
									console.log("选中了第"+record.key+"行")
								}, // 点击行
								onDoubleClick: event => {console.log('双击了行',record);},
								onContextMenu: event => {},
								onMouseEnter: event => {}, // 鼠标移入行
								onMouseLeave: event => {},
							};
						}}
					/>
				</Card>
				<Card title="Mock-多选表格" className="card-wrap">
					<div>
						<Button onClick={this.deleteItem}>删除</Button>
					</div>
					<Table 
						columns={columns} 
						dataSource={this.state.data} 
						rowSelection={rowCheckSelection}
						onRow={record => {
							return {
								onClick: event => {}, // 点击行
								onDoubleClick: event => {console.log('双击了行',record);},
								onContextMenu: event => {console.log('鼠标右击');},
								onMouseEnter: event => {}, // 鼠标移入行
								onMouseLeave: event => {},
							};
						}}
					/>
				</Card>
			</Fragment>
		)
	}
}

export default BasicTable;